import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Card, Row, Col } from 'antd'
import './style.scss'

export default class TopBrand extends PureComponent {

  static propTypes = {
    data: PropTypes.arrayOf(PropTypes.object)
  }

  static defaultProps = {
    data: []
  }

  render () {
    const { data } = this.props
    let span = data && data.length > 3 ? 6 : 8
    return (
      <Row>
        {data && data.map((item, i) => {
          return (
            <Col span={span}>
              <BrandItem {...item} />
            </Col>
          )
        })}
      </Row>
    )
  }
}

class BrandItem extends PureComponent {

  static propTypes = {
    backgroundColor: PropTypes.string,
    title: PropTypes.string,
    value: PropTypes.string
  }

  static defaultProps = {
    backgroundColor: undefined,
    title: '',
    value: ''
  }

  render () {
    const { backgroundColor, title, value } = this.props
    return (
      <Card style={{ margin: '0 10px', borderRadius: 4, backgroundColor }} bodyStyle={styles.bodyStyle}>
        <h2 className="top-brand-card-title">{title}</h2>
        <h2 className="top-brand-card-value">{value}</h2>
      </Card>
    )
  }
}

const styles = {

  bodyStyle: {
    display: 'flex', 
    justifyContent: 'space-between', 
    fontFamily: 'Comic Sans MS'
  }
}